<template>
  <div>
    <!-- 表单 -->
    <div class="select-box">
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="selectData.realname" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="selectData.userJob" class="m-2" placeholder="请选择">
            <el-option label="Frontend Developer" value="Frontend" />
            <el-option label="BackEnd Developer" value="BackEnd" />
            <el-option label="Tester" value="Tester" />
            <el-option label="Business Analysis" value="Business Analysis" />
          </el-select>
        </el-form-item>
        <el-form-item label="所在项目">
          <el-input v-model="selectData.projectName" placeholder="请输入所在项目" />
        </el-form-item>
        <el-form-item label="职级">
          <el-select v-model="selectData.rank" class="m-2" placeholder="请选择">
            <el-option label="Leader" value="Leader" />
            <el-option label="Employee" value="Employee" />
          </el-select>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-select v-model="selectData.status" class="m-2" placeholder="请选择">
            <el-option label="On Project" value="On Project" />
            <el-option label="Bench" value="Bench" />
            <el-option label="On leave" value="On leave" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="selectData.dept" class="m-2" placeholder="请选择">
            <el-option label="CSD" value="CSD" />
            <el-option label="I&D" value="I&D" />
            <el-option label="ERP" value="ERP" />
          </el-select>
        </el-form-item>
        <el-form-item label="入职日期">
          <el-input v-model="selectData.employmentDate" placeholder="请输入职年份" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getPerson">查询</el-button>
          <el-button class="login-btn" @click="resetForm">重置</el-button>
          <el-button class="login-btn" @click="addPerson">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="dataList.comList" border style="">
        <el-table-column prop="id" label="id" width="120" />
        <el-table-column prop="realname" label="姓名" width="150" />
        <el-table-column prop="userJob" label="职位" width="180" />
        <el-table-column prop="status" label="状态" width="150" />
        <el-table-column prop="projectName" label="所在项目" width="150" />
        <el-table-column prop="employmentDate" label="入职日期" width="150" />
        <el-table-column prop="dept" label="部门" width="150" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="changePerson(scope.$index, scope.row)">
              修改
            </el-button>
            <el-button type="primary" size="small" @click="deletePerson(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改 -->
    <el-drawer v-model="isShow" size="30%" title="修改人员信息!" direction="rtl" custom-class="demo-drawer">
      <div class="demo-drawer__content">
        <el-form :model="active" :label-userJob="labeluserJob" label-width="auto" :rules="rule" ref="ruleFormRef">
          <el-form-item label="姓名" prop="realname">
            <el-input v-model="active.realname" autocomplete="off" />
          </el-form-item>
          <el-form-item label="职位" prop="userJob">
            <el-select v-model="active.userJob" placeholder="请选择">
              <el-option label="Frontend Developer" value="Frontend Developer" />
              <el-option label="BackEnd Developer" value="BackEnd Developer" />
              <el-option label="Tester" value="Tester" />
              <el-option label="Business Analysis" value="Business Analysis" />
            </el-select>
          </el-form-item>
          <el-form-item label="入职日期" prop="employmentDate">
            <el-input v-model="active.employmentDate" autocomplete="off" />
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="active.dept" placeholder="请选择">
              <el-option label="CSD" value="CSD" />
              <el-option label="I&D" value="I&D" />
              <el-option label="ERP" value="ERP" />
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="active.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="active.email" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="onClick">确认</el-button>
        </div>
      </div>
    </el-drawer>
     <!-- 新增 -->
     <el-drawer v-model="isShownew" size="30%" title="新增人员信息!" direction="rtl" custom-class="demo-drawer">
      <div class="demo-drawer__content">
        <el-form :model="active" :label-userJob="labeluserJob" label-width="auto" :rules="rule" ref="ruleFormRef">
          <el-form-item label="姓名" prop="realname">
            <el-input v-model="active.realname" autocomplete="off" />
          </el-form-item>
          <el-form-item label="职位" prop="userJob">
            <el-select v-model="active.userJob" placeholder="请选择">
              <el-option label="Frontend Developer" value="Frontend Developer" />
              <el-option label="BackEnd Developer" value="BackEnd Developer" />
              <el-option label="Tester" value="Tester" />
              <el-option label="Business Analysis" value="Business Analysis" />
            </el-select>
          </el-form-item>
          <el-form-item label="入职日期" prop="employmentDate">
            <el-input v-model="active.employmentDate" autocomplete="off" />
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="active.dept" placeholder="请选择">
              <el-option label="CSD" value="CSD" />
              <el-option label="I&D" value="I&D" />
              <el-option label="ERP" value="ERP" />
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="active.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="active.email" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="isShownew = false">取消</el-button>
          <el-button type="primary" @click="newonClick">确认</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 分页 -->
    <el-pagination v-model:currentPage="selectData.pages" :page-size="selectData.pagesizes"
      :page-sizes="[10, 20, 30, 40]" small layout="total, sizes, prev, pager, next, jumper" :total="selectData.count"
      @size-change="sizeChange" @current-change="currentChange" />
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs, watch, ref } from 'vue';
import { getPersonList, delPersonList, updatePersonList ,addPersonList} from "@/request/personapi";
import { InitData, ListInt } from "@/type/person";
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
  setup() {
    const labeluserJob = ref('left')
    const data = reactive(new InitData())
    onMounted(() => {
      getdataPerson()
    });
    const getdataPerson = () => {
      const params: Object = {
        page: 1,
        pageSize: 100,
        realname: data.selectData.realname,
        dept: data.selectData.dept,
        projectName: data.selectData.projectName,
        rank: data.selectData.rank,
        employmentDate: data.selectData.employmentDate,
        status: data.selectData.status,
        userJob: data.selectData.userJob
      }
      getPersonList(params).then(res => {
        console.log(res);
        data.list = res.data.records
        data.selectData.count = res.data.records.length
      });
    }
    //分页
    const dataList = reactive({
      comList: computed(() => {
        return data.list.slice((data.selectData.pages - 1) * data.selectData.pagesizes, data.selectData.pages * data.selectData.pagesizes);
      }),
    });
    const currentChange = (pages: number) => {
      data.selectData.pages = pages
    }
    const sizeChange = (pagesizes: number) => {
      data.selectData.pagesizes = pagesizes
    }
    //查询
    const getPerson = () => {
      getdataPerson()
    };
    ////重置
    const resetForm = () => {
      data.selectData.realname = "";
      data.selectData.userJob = "";
      data.selectData.projectName = "";
      data.selectData.rank = "";
      data.selectData.status = "";
      data.selectData.dept = "";
      data.selectData.employmentDate = "";
    };
    //监听输入框的属性
    watch(
      [() => data.selectData.realname, () => data.selectData.userJob, () => data.selectData.projectName, () => data.selectData.rank, () => data.selectData.status, () => data.selectData.dept, () => data.selectData.employmentDate,], () => {
        if (data.selectData.realname == '' && data.selectData.userJob == '' && data.selectData.projectName == '' && data.selectData.rank == '' && data.selectData.status == '' && data.selectData.dept == '' && data.selectData.employmentDate == '') {
          getdataPerson()
        }
      });
    //新增
    const addPerson = () => {
      data.isShownew = true
    }
    const newonClick = () => {
      addPersonList(active).then((res) => {
        getdataPerson()
      })
      data.isShownew = false
    }
    //修改
    const active = reactive<any>({
      id: '',
      realname: '',
      userJob: '',
      employmentDate: '',
      dept: '',
      phone: '',
      email: ''
    })
    const changePerson = (index: number, row: any) => {
      console.log(row);
      data.isShow = true
      active.id = row.id,
        active.realname = row.realname,
        active.userJob = row.userJob,
        active.employmentDate = row.employmentDate,
        active.dept = row.dept,
        active.phone = row.phone,
        active.email = row.email
    }
    const onClick = () => {
      updatePersonList(active).then((res) => {
        getdataPerson()
      })
      data.isShow = false
    }
    //校验邮箱的规则
    const checkEmail = (rule: any, value: any, callback: any) => {
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!reg.test(value)) {
        callback(new Error('请输入有效的邮箱'));
      }
      callback();
    }
    // 验证手机号的规则
    const checkMobile = (rule: any, value: any, callback: any) => {
      const reg = /^1[3456789]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error('请输入有效的手机号码'));
      }
      callback();
    }
    // 验证规则
    const rule = {
      email: [
        { required: true, message: "请输入邮箱", trigger: "blur" },
        { validator: checkEmail, teigger: 'blur' }
      ],
      phone: [
        { required: true, message: "请输入手机号码", trigger: "blur" },
        { validator: checkMobile, teigger: 'blur' }],
    }
    //删除
    const deletePerson = (index: number, row: ListInt) => {
      if (row.status != "On Project") {
        //data.isShowdel1 = true
        ElMessageBox.confirm(
          '确定要删除该员工?',
          '删除员工',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(async () => {
            await delPersonList(row.id)

            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            getdataPerson()
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消删除',
            })
          })
      } else {
        data.isShowdel = true
        ElMessageBox.confirm(
          '该员工处于项目中，不可删除！',
          '删除员工',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        getdataPerson()
      }
    }
    return {
      ...toRefs(data), active, dataList, currentChange, sizeChange, getPerson, resetForm, labeluserJob, addPerson, getdataPerson, changePerson, rule, onClick,newonClick, deletePerson,
    }
  },
})
</script>
<style lang="scss" scoped>
</style>
